<pngx-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
  <pngx-logo extra_classes="d-none d-md-block mt-n2" height="3.5rem"></pngx-logo>
</pngx-page-header>

<div class="row">
  <div class="col-12 col-lg-8 col-xl-9 mb-4">
    <div class="row row-cols-1 g-4"
      cdkDropList
      [cdkDropListDisabled]="settingsService.globalDropzoneActive"
      (cdkDropListDropped)="onDrop($event)"
      >
      @if (savedViewService.loading) {
        <div class="col">
          <div class="spinner-border spinner-border-sm me-2" role="status"></div>
          <ng-container i18n>Loading...</ng-container>
        </div>
      }

      @if (settingsService.offerTour()) {
        <div class="col">
          <pngx-welcome-widget (dismiss)="completeTour()"></pngx-welcome-widget>
        </div>
      }

      <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
        @for (v of dashboardViews; track v.id) {
          <div class="col">
            <pngx-saved-view-widget
              [savedView]="v"
              (cdkDragStarted)="onDragStart($event)"
              (cdkDragEnded)="onDragEnd($event)"
              >
            </pngx-saved-view-widget>
          </div>
        }
      </ng-container>
    </div>
  </div>
  <div class="col-12 col-lg-4 col-xl-3 col-sidebar">
    <div class="row row-cols-1 g-4 mb-4 sticky-lg-top z-0">
      <div class="col">
        <pngx-statistics-widget *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"></pngx-statistics-widget>
      </div>
      <div class="col">
        <pngx-upload-file-widget></pngx-upload-file-widget>
      </div>
    </div>
  </div>
</div>
